<template>
  <!-- 详情 -->
  <div class="detail">
    <div>
      <input type="button" name="Submit" value="< 返回" onclick="javascript:window.history.back(-1);" />
      <dl>
        <dt>
          <img :src="info.img" alt />
        </dt>
        <dd>
          <h3>{{info.tit}}</h3>
          <h4>{{info.word}}</h4>
          <p style="color:red">
            <span>{{info.sum}}万</span> |
            <span>{{info.price}}元 / m</span>
          </p>
          <p>
            <van-sidebar>
              <van-sidebar-item title="核心卖点" />
            </van-sidebar>
          </p>
          <p>原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用 各出各税</p>
          <p>
            <van-sidebar>
              <van-sidebar-item title="服务介绍" />
            </van-sidebar>
          </p>
          <p>我从事房产工作已有多年,经验丰富。能够精准的根据每一位客户的详细需求匹配到性价比合适的</p>
        </dd>
      </dl>
      <p>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
          <van-goods-action-icon icon="cart-o" text="购物车" />
          <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
          <van-goods-action-button type="warning" text="加入购物车" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </p>
    </div>
  </div>
</template>


<script>
import { hotRoom } from "@/api/index";
import axios from "axios";

export default {
  name: "index",

  data() {
    return {
      info: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    //调用函数
    this.getList();
  },
  methods: {
    //获取详情数据
    getList() {
      axios({
        url: "/api/Detail",
        method: "post",
        data: {
          id: this.id
        }
      }).then(res => {
        this.info = res.data.data;
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgb(241, 241, 241);
  input{
    position: absolute;
    margin-top: 2px;
  }
  dl {
    width: 100%;
    height: 100%;
    dt {
      width: 100%;
      height: 200px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    dd {
      margin-left: 5%;
      width: 90%;
      p {
        margin-top: 5px;
      }
    }
  }
}
</style>